<template>
  <div class="upImgList">
      <div :class="index%3==0?'noLeft upImgItem':'upImgItem'" :key="index" v-for="(item,index) in imgArr">
          <img :src="item.img" />
          <div @click="delImgFn(index)" class="delIcon iconfont icon-shanchu-05"></div>
      </div>
      <div :class="imgArr.length%3==0?'noLeft upImgItem addImg':'upImgItem addImg'">
          <div class="upImg iconfont icon-xiangji2"></div>
          <input accept="image/*" multiple ref="file" type="file" @change="upImgFn($event)" />
      </div>
      <toast v-model="showToast" width="50%" position="middle" type="text" :time="1000">{{showText}}</toast>
  </div>
</template>

<script>
    import {Toast } from 'vux'
  export default {
    components: {Toast},
    data() {
      return {
        showText:'',
        showToast:false,
        imgArr:this.propImg,
      }
    },
    props: {
      icon:{},
      propImg:{}
    },
    methods:{
      delImgFn(index){
          this.imgArr.splice(index,1)
          this.$emit('successCropper',this.imgArr)
      },
      upImgFn(e){
          let fileArr = e.target.files
          for(let i =0;i<fileArr.length;i++){
              setTimeout(()=>{
                  var fileObj = fileArr[i]; //获得文件上传的输入框的文件流
                  var formData = new FormData();// 可以增加表单数据
                  formData.append("file",fileObj);
                  $.ajax({
                      url:this.apis+'/common/Upload/UpImg',
                      dataType:"json",
                      type:'post',
                      processData : false,
                      contentType : false,
                      data:formData,
                      success:(res)=>{
                          if(res.code==1){
                            this.imgArr.push({img:res.data.src})
                            this.$emit('successCropper',this.imgArr)
                          }else{
                            this.showText = res.msg
                            this.showToast= true
                          }
                      }
                  }).catch(()=>{
                    this.showText = res.data.msg
                    this.showToast= true
                  })
              })
          }
        },
    },
    mounted(){
    },
    created() {
    },
  }
</script>

<style scoped lang="less">
.upImgList{
      padding-top: 1rem;
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      box-sizing: border-box;
      .upImgItem{
          width: 30%;
          overflow: hidden;
          margin-left: 5%;
          height: 5rem;
          border-radius: 0.25rem;
          background-color: #f7f8fa;
          position: relative;
          margin-bottom: 1rem;
          .upImg{
              width: 100%;
              height: 100%;
              text-align: center;
              line-height: 5rem;
              font-size: 2rem;
              color: #ccc;
          }
          input{
              width: 100%;
              height: 100%;
              opacity: 0;
              position: absolute;
              top: 0;
              left: 0;
          }
          img{
              width: 100%;
          }
          .delIcon{
              position: absolute;
              top: 0;
              right: 0;
              font-size: 1rem;
              color: #fff;
              width: 1.5rem;
              height: 1.5rem;
              background-color: black;
              text-align: center;
              line-height: 1.5rem;
              border-radius: 0 0 0 0.75rem;
          }
      }
      .addImg{
        max-height: 5rem;
        .upImg{
          max-height: 5rem;
        }
      }
      .noLeft{
          margin-left: 0;
      }
  }
</style>
